<template>
  <div class="yue">
    <user-head :title="title"></user-head>
    <div class="mony">
        <h5>您的余额为:<span>￥{{money}}</span></h5>
        <div class="chongzhi" @click="input">
         充值
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import userHead from '../head/'
import {MessageBox, Toast} from 'mint-ui'
export default {
  name: 'yue',
  data () {
    return {
      title: '余额',
      money: 0
    }
  },
  created () {
    axios.post('/user/mony', {
      userId: this.$store.state.userId
    }).then(res => {
      this.money = res.data.data[0].money
    })
  },
  methods: {
    input () {
      var _this = this
      MessageBox.prompt('请输入充值金额').then(({ value, action }) => {
        axios.post('/user/mony', {
          userId: this.$store.state.userId,
          money: value
        }).then(res => {
          console.log(res)
          if (res.data.status === 0) {
            Toast({
              message: '充值成功',
              position: 'middle',
              duration: 2000
            })
            _this.money = res.data.data[0].money
          } else {
            Toast({
              message: res.msg,
              position: 'middle',
              duration: 2000
            })
          }
        })
      })
    }
  },
  components: {
    userHead
  }
}
</script>

<style lang="scss">
@import 'mint-ui/lib/style.css';
@import '@/styles/common/px2rem.scss';
.mony{
    height: px2rem(200);
    background: url('https://assets.maizuo.com/h5/v5/public/app/img/bg.043a928.png') no-repeat top center;
    h5{
      font-weight: 400;
      font-size: px2rem(16);
      padding: px2rem(10);
      display: flex;
      justify-content: space-between;
      span {
        color: #fff;
      }
    }
    .chongzhi{
      margin-top: px2rem(50);
      text-align: center;
      padding: 0 px2rem(50);
    }
}
.mint-msgbox-title{
  font-size: px2rem(20);
}
.mint-msgbox-message{
  font-size: px2rem(18);
}
.mint-msgbox-input input{
  height: px2rem(30);
  font-size: px2rem(18);
  text-align: center;
}
.mint-msgbox-btns{
  height: px2rem(40);
  line-height: px2rem(40);
  button{
    font-size: px2rem(20);
  }
}

.mint-toast-text{
  font-size: px2rem(18);
}
</style>
